<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/common.css">

    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <style>
        .layui-row {
            height: 50px;
            background-color: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .demo-login-container {
            width: 320px;
            margin: 21px auto 0;
        }

        .demo-login-other .layui-icon {
            position: relative;
            display: inline-block;
            margin: 0 2px;
            top: 2px;
            font-size: 26px;
        }

        .login-container {
            width: 100%;
            height: calc(100% - 50px);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-center {
            width: 400px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.7);
        }

    </style>
</head>

<body>
<!--导航栏-->
<div class="layui-row">
    <div class="layui-col-sm3">
        <div class="grid-demo grid-demo-bg1">
            <div><img src="image/博弈.png" alt="">五子棋对战</div>
        </div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo"></div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo grid-demo-bg1"></div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo">
            <a href="login.html">
                <img src="image/login.png" alt="">登录
            </a>
            <a href="register.html">
                <img src="image/register.png" alt="">注册
            </a>
        </div>
    </div>
</div>

<div class="login-container">
    <div class="login-center">
        <!--      <form class="layui-form">-->
        <div class="demo-login-container">
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>

                    <input type="text" name="username" id="username" value="" lay-verify="required"
                           placeholder="用户名" lay-reqtext="请填写用户名"
                           autocomplete="off" class="layui-input" lay-affix="clear">

                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>

                    <input type="password" name="password" id="password" value="" lay-verify="required"
                           placeholder="密   码"
                           lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">

                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login" id="submit">登录</button>
            </div>
        </div>
        <!--      </form>-->
    </div>
</div>

<script src="js/jquery.js"></script>
<script>
    let usernameInput = document.querySelector('#username');
    let passwordInput = document.querySelector('#password');
    let submit = document.querySelector('#submit');
    submit.onclick = function () {
        $.ajax({
            type: 'post',
            url: '/login',
            data: {
                username: usernameInput.value,
                password: passwordInput.value,
            },
            success: function (body) {
                // 登陆成功时
                // 先进行判断
                if (body && body.userId > 0) {
                    location.assign('/game_hall.html');
                } else {
                    alert('登录失败!');
                }
            },
            error: function () {
                alert('登录失败!');
            }
        });
    }

</script>
</body>

</html>